<template>
	<div class="page">
		<!-- search -->
		<div class=""
			style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
			<div class="" @click="popBack()">
				<i class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></i>
				<span style="font-size: 16px;">订单管理</span>
			</div>
			<!-- search -->
            <div
                style="margin-left: 12px;flex: 1;display: flex;align-items: center;flex-direction: row;background-color: #F1F1F1;height: 30px;border-radius: 15px;">
                <div class="iconfont icon-sousuo"
                    style="font-size: 16px;font-weight: bold;color: #999999;margin-right: 10px;margin-left: 10px;">
                </div>
                <input type="text" value="" placeholder="请输入关键字搜索"
                    style="font-size: 12px;flex: 1;border: none;background-color: #f1f1f1;" />
                <div style="width: 1px;height: 14px;background-color: #999999;" />
                <div style="font-size: 12px;color: #007AFF;padding:0 5px;width: 40px;text-align: center;">搜索</div>
            </div>
		</div>

		<!-- tab -->
		<div style="flex: 1;display: flex;flex-direction: column;">
			<!-- tabbar -->
			<scroll-view scroll-x="true" style="
			padding: 0 12px;
			display: flex;	white-space: nowrap;
		overflow: hidden;
		width: calc(100vw - 24px);
		background-color: #FFFFFF;">
				<div @click="tabClick(idx)"
					style="display: inline-block;color: #333333;padding: 5px 0;width: 25%;"
					v-for="(obj,idx) in tabs" :key="idx">
					<div style="text-align: center;">{{obj}}</div>
					<div style="height: 2px;margin-top: 5px;background-color: #007AFF;" v-if="idx == tabindex"></div>
				</div>
			</scroll-view>
			<!-- list -->
			<div style="flex: 1;overflow-y: auto;background-color: #0077AA;">
				<order-list-all v-if="tabindex==0"></order-list-all>
				<order-list-w-pay v-if="tabindex==1"></order-list-w-pay>
				<order-list-d-pay v-if="tabindex==2"></order-list-d-pay>
				<order-list-r-back v-if="tabindex==3"></order-list-r-back>
			</div>

		</div>


	</div>
</template>

<script>
	export default {
        components:{
            "order-list-all":()=>import("@/components/order-list-all/order-list-all"),
            "order-list-w-pay":()=>import("@/components/order-list-w-pay/order-list-w-pay"),
            "order-list-d-pay":()=>import("@/components/order-list-d-pay/order-list-d-pay"),
            "order-list-r-back":()=>import("@/components/order-list-r-back/order-list-r-back")
        },
		data() {
			return {
				tabs: [
					"全部",
					"待支付",
					"已支付",
					"退款"
				],
				tabindex: 0
			}
		},

		methods: {
			popBack() {
				this.$router.back({

				})
			},
			loadDetial() {
				this.$router.push({
					path: "/pages/order_index/order_detail"
				})
			},
			tabClick(idx) {
				this.tabindex = idx
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #f4f5f7;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		display: flex;
	}
</style>
